<template>
	<view :class="AppStyle">
		<view class="comment-list">
			<!-- 评论记录列表-start -->
			<view class="comment-box-item" v-for="(item, index) in datas">
				<view class="" >
					<view class="msg-top">
						<view>
							<image :src="item.userLogo" mode="aspectFill" class="avatar"></image>
						</view>
						<view class="comment-main">
							<!-- 父评论体-start -->
							<view class="nick-name-box">
								<span class="nick-name">
									{{item.nickName}} - 评论了
								</span>
								
								<i class="zi zi_eye" style="color: red;font-size: 10rpx;line-height: 30rpx;"></i>
							</view>
							<view class="reply-box">
								<view class="reply-time">
									{{item.replyTime}}
								</view>
								<view class="comment-main-btn">
									回复
								</view>
							</view>
						</view>
					</view>
					<view class="msg-top-content">
						{{item.content.length > 60 ? interruptStr(item.content, 59) : item.content}}
					</view>
					<view class="my-reply-box">
						<view class="my-comment-box">
							<span class="my-comment-title">我的评论:</span>
							<span class="my-comment-content">
								{{item.myReplyContent.length > 60 ? interruptStr(item.myReplyContent, 59) : item.myReplyContent}}
							</span>
						</view>
						<view class="comment-sub-box" @tap="toSource(item.parSource)">
							<view class="source-box">
								<view>
									<image :src="item.parSource.sourceLogoUrl" mode="aspectFill" class="img">
									</image>
								</view>
								<view class="content">
									{{item.parSource.content.length > 60 ? interruptStr(item.parSource.content, 59): item.parSource.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="load-more">
			<text v-if="showMoreBotton">{{moreText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				AppStyle: 'bg-wite-page commom-margin',
				datas: [{
					"id": 1, // 唯一主键
					"replyTime": "2023-05-02 12:23",
					"readStatus": 1, // 1：未读；2：已读
					"userLogo": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
					"nickName": "我的世界没人懂", // 评论者昵称，昵称过长请在后端截断
					"content": "啦啦啦啦德玛西亚，我是一个大头兵，两头都在死撑，摸样不太丑，可我一点也不萌。", // 评论内容
					"createTime": "2021-07-02 16:32:07", // 创建时间,
					"myReplyContent": "终南山到底是个什么样子的人，也只有历史来评判！么样子的人，也只有历史来评判！么样子的人，也只有历史来评判！我们现在所说的都是自己的想法",
					"parSource": {
						"sourceLogoUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
						"content": "你赞成春节不调休吗你赞成春节不调休吗你赞成春节不调休吗你赞成春节不调休吗你赞成春节不调休吗？",
						"id": 1,
						"sourceType": 1, // 1:投票；2:资讯
					}
				},
				{
					"id": 2, // 唯一主键
					"replyTime": "2023-05-02 10:18",
					"readStatus": 1, // 1：未读；2：已读
					"userLogo": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0", // 评论者头像地址
					"nickName": "彭于晏", // 评论者昵称，昵称过长请在后端截断
					"content": "美丽国靠自己的强大强迫别人听从自己的想法，将自己的思想强加于别国身上。", // 评论内容
					"createTime": "2021-07-02 16:32:07", // 创建时间,
					"myReplyContent": "终南山到底是个什么样子的人，也只有历史来评判！么样子的人，也只有历史来评判！么样子的人，也只有历史来评判！我们现在所说的都是自己的想法",
					"parSource": {
						"sourceLogoUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
						"content": "你赞成春节不调休吗？",
						"id": 1,
						"sourceType": 1, // 1:投票；2:资讯
					}
				}],
				showMoreBotton: true,
				moreText: '加载更多'
			}
		},
		methods: {
			interruptStr(str, length) {
				return str.slice(0, length) + '...'
			},
			toSource(source) {
				if (source.sourceType === 1) {
					// 跳往投票详情
					uni.navigateTo({
						url:'/pages/topic/topicdetail?id='
					});
				} else if (source.sourceType === 2) {
					// 跳往资讯详情
					uni.navigateTo({
						url:'/pages/news/newsDetail?id='
					});
				} else {
					//暂无
					console.log("此类型无对应跳转方案")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment-box-item {
		padding: 20rpx 0;

		.msg-top-content {
			margin: 5rpx 10rpx;
			font-size: 25rpx;
			// font-weight: 600;
			// font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
		}
	}

	.msg-top {
		display: flex;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.comment-main {
		padding-left: 20rpx;
		width: 100%;
	}

	.nick-name-box {
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;

		.nick-name {
			color: #8D8C91;
			font-weight: bold;
			margin-right: 10rpx;
			font-size: 25rpx;
		}
	}

	.reply-box {
		display: flex;

		.reply-time {
			font-size: 5rpx;
			color: #8D8C91;
			margin-top: 10rpx;
			width: 90%;
		}

		.comment-main-btn {
			margin-left: 10rpx;
			font-size: 12rpx;
			color: #8D8C91;
			line-height: 32rpx;
		}
	}


	.sub-comment-main-top {
		width: 100%;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.comment-sub-item {
		margin-top: 10rpx;
		display: flex;
	}

	.my-reply-box {
		background-color: #F6F6F6;
		padding-bottom: 15rpx;

		.my-comment-box {
			margin: 10rpx 15rpx;

			.my-comment-title {
				font-size: 12rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}

			.my-comment-content {
				font-size: 12rpx;
			}
		}

		.comment-sub-box {
			background-color: white;
			margin: 0rpx 15rpx;
			padding-top: 10rpx;

			.source-box {
				display: flex;
				margin-left: 10rpx;

				.img {
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
				}

				.content {
					margin: 0rpx 19rpx;
					font-size: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>